<template>
  <div class="body box-standard">
    <div class="container box-vertical box-border">
      <div style="text-align: left;width: 400px;color: #409EFF;" class="bottom-line">
        <h3>
          <span style="color: #2980b9;">注册</span>
          <span style="font-size: 16px;"><router-link to="/login">登陆</router-link></span>
        </h3>
      </div>
      <div class="box-standard">
        <form>
          <table>
            <tr>
              <td class="left-align">昵称:</td>
              <td>
                <div class="box-standard table-interval">
                  <el-input placeholder="请输入昵称" v-model="userNickname" clearable></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="left-align">用户名:</td>
              <td>
                <div class="box-standard table-interval">
                  <el-input placeholder="用户名至少8位,可以是数字和大小写字母" v-model="userUsername" clearable></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="left-align">密码:</td>
              <td>
                <div class="box-standard table-interval">
                  <el-input placeholder="密码至少8位,可以是数字和大小写字母" v-model="userPassword1" show-password clearable></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="left-align">确认密码:</td>
              <td>
                <div class="table-interval box-standard">
                  <el-input placeholder="密码至少8位,可以是数字和大小写字母" v-model="userPassword2" show-password clearable></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="left-align">邮箱:</td>
              <td>
                <div class="box-standard table-interval">
                  <el-input placeholder="请输入邮箱" v-model="userEmail" clearable></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="left-align">手机号:</td>
              <td>
                <div class="box-standard table-interval">
                  <el-input placeholder="请输入手机号进行验证" v-model="userTelephone" clearable></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="left-align"><el-button v-on:click="sendMsg"  :disabled="isWait"  style="width: 120px;">{{waitCount}}{{userEmailTip}}</el-button></td>
              <td>
                <div class="box-standard table-interval">
                  <el-input v-model="code" placeholder="请输入验证码" @keyup.enter.native="register"></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="table-interval" style="display: flex;justify-content: space-around;">
                  <!--                  事件的绑定必须用v-on-->
                  <el-button :loading=isLoading @click="register" type="primary">注册</el-button>
                  <el-button native-type="reset" type="primary">重置</el-button>
                </div>
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Register",
      data() {
        return {
          userNickname: '',
          userUsername: '',
          userPassword1: '',
          userPassword2: '',
          userTelephone: '',
          userEmail: '',
          code: '',
          isLoading: false,
          userEmailTip: '发送验证码',
          timer: null,
          waitCount: ''
        }
      },
      computed:{
        isWait:function(){
          let data = this.$data;
          return data.timer != null?true:false;
        }
      },
      methods: {
        sendMsg: function (event) {
          let that = this;
          const qs = require("qs");
          let data = this.$data;
          let userTelephoneTest = /^1[3|4|5|7|8][0-9]{9}/;
          if(!userTelephoneTest.test(data.userTelephone)){
            this.$message("当前手机号无效!");
            return ;
          }
          //设置定时器使暂时无法发送信息
          this.waitMsg();
          this.axios.post('/user/sendRegisterMsg',qs.stringify({
            'userTelephone': data.userTelephone
          }))
          .then(response => {
            let resData = response.data;
            if(resData.errCode == 200){
              this.$message({
                message: resData.data,
                type: 'success'
              });
            }else{
              this.$message(resData.errMsg);
            }
          })
        },
        check: function(data){
          let that = this;
          let userNickname = data.userNickname;
          let userUsername = data.userUsername;
          let userPassword1 = data.userPassword1;
          let userPassword2 = data.userPassword2;
          let userTelephone = data.userTelephone;
          let userEmail = data.userEmail;
          let code = data.code;
          let userUsernameTest = /([0-9a-zA-Z]{7,30})/;
          let userPasswordTest = /([0-9a-zA-Z]{7,30})/;
          let userTelephoneTest = /^1[3|4|5|7|8][0-9]{9}/;
          let userEmailTest = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
          let res = true;
          if(userNickname==''){
            res = false;
            that.$message("昵称不能为空!");
          }else if(!userUsernameTest.test(userUsername)){
            res = false;
            that.$message("请按要求填写用户名!");
          }else if(userPassword1 != userPassword2){
            res = false;
            that.$message("密码不一致!")
          }else if(!userPasswordTest.test(userPassword1)){
            res = false;
            that.$message("请按要求填写密码!");
          }else if(!userTelephoneTest.test(userTelephone)){
            res = false;
            that.$message("手机号无效!");
          }else if(!userEmailTest.test(userEmail)){
            res = false;
            that.$message("邮箱无效")
          }else if(code.length != 6){
            res = false;
            that.$message("验证码无效!");
          }
          return res;
        },
        register: function (event) {
          let data = this.$data;
          let app = this;
          const qs = require('qs');
          if(!this.check(data)){
            return ;
          }
          data.isLoading = true;
          this.axios.post('/user/register',qs.stringify({
            'userNickname': data.userNickname,
            'userUsername': data.userUsername,
            'userPassword': data.userPassword1,
            'userTelephone': data.userTelephone,
            'userEmail': data.userEmail,
            'code': data.code
          })).then(response => {
            let resData = response.data;
            if(resData.errCode == 200){
              app.$store.commit("changeLoginState");
              app.$store.commit("setUserNickname",data.userNickname);
              app.$router.push({
                path: '/main'
              });
            }else if(resData.errCode == 300){
              app.$message(resData.errMsg);
            }else{
              app.$message(resData.errMsg);
            }
          })
          data.isLoading = false;
        },
        waitMsg:function(){
          let data = this.$data;
          if(data.timer==null){
            let time =60;
            data.userEmailTip = "s后可再发送";
            data.waitCount = time;
            data.timer = setInterval(function () {
              if(time <= 60 && time > 0){
                time--;
                data.waitCount = time;
              }else{
                clearInterval(data.timer);
                data.timer = null;
                data.waitCount = '';
                data.userEmailTip = "发送验证码";
              }
            },1000);
          }
        }
      }
    }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 900px;
    background-image: url("../assets/images/background2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .container{
    width: 500px;
    height: 500px;
    background-color: rgba(100%,100%,100%,0.3);
  }

  .center-align{
    text-align: center;
  }

  .left-align{
    text-align: left;
  }
</style>
